<div class="table-items-row table-items-row-expandable workflow">
    <div class="table-items-row-summary row g-0 align-items-center">
        <div class="col col-name">
            <span class="workflow-name">{{ workflowView.dto.displayName }}</span>
        </div>

        <div class="col col-tags">
            <sqx-tag-editor
                [itemConverter]="(schemasSource.normalConverter | async)!"
                [ngModel]="workflowView.dto.schemaIds"
                readonly="true"
                styleBlank="true"
                styleScrollable="true" />
        </div>

        <div class="col-options">
            <div class="float-end">
                <button class="btn btn-outline-secondary btn-expand me-1" [class.expanded]="isEditing" (click)="toggleEditing()" type="button">
                    <span class="hidden">{{ "common.settings" | sqxTranslate }}</span> <i class="icon-settings"></i>
                </button>
                <button
                    class="btn btn-text-danger"
                    confirmRememberKey="deleteWorkflow"
                    confirmText="i18n:workflows.deleteConfirmText"
                    confirmTitle="i18n:workflows.deleteConfirmTitle"
                    [disabled]="!workflowView.dto.canDelete"
                    (sqxConfirmClick)="remove()"
                    type="button">
                    <i class="icon-bin2"></i>
                </button>
            </div>
        </div>
    </div>

    @if (isEditing) {
        <div class="table-items-row-details">
            <div class="table-items-row-details-tabs clearfix">
                <ul class="nav nav-tabs2">
                    <li class="nav-item">
                        <a class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)">
                            {{ "workflows.tabEdit" | sqxTranslate }}
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)">
                            {{ "workflows.tabVisualize" | sqxTranslate }}
                        </a>
                    </li>
                </ul>

                <div class="float-end">
                    <button class="btn btn-text-secondary" (click)="toggleEditing()" type="button">
                        {{ "common.cancel" | sqxTranslate }}
                    </button>
                    @if (isEditable) {
                        <button class="btn btn-primary ms-1" (click)="save()" type="submit">{{ "common.save" | sqxTranslate }}</button>
                    }
                </div>
            </div>

            <div class="table-items-row-details-tab">
                @if (selectedTab === 0) {
                    <sqx-form-error [error]="error" />
                    <div class="form-group row">
                        <label class="col-form-label" for="{{ workflowView.dto.id }}_name">{{ "common.name" | sqxTranslate }}</label>
                        <div class="col">
                            <input
                                class="form-control"
                                id="{{ workflowView.dto.id }}_name"
                                [disabled]="!isEditable"
                                [ngModel]="workflowView.dto.name"
                                (ngModelChange)="rename($event)"
                                [ngModelOptions]="onBlur" />
                            <sqx-form-hint> {{ "workflows.workflowNameHint" | sqxTranslate }} </sqx-form-hint>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-form-label" for="{{ workflowView.dto.id }}_schemas">{{ "common.schemas" | sqxTranslate }}</label>
                        <div class="col">
                            <sqx-tag-editor
                                [disabled]="!isEditable"
                                [itemConverter]="(schemasSource.converter | async)!"
                                [itemsSource]="(schemasSource.normalConverter | async)?.suggestions"
                                [ngModel]="workflowView.dto.schemaIds"
                                (ngModelChange)="changeSchemaIds($event)"
                                placeholder="{{ 'common.tagAddSchema' | sqxTranslate }}" />
                            <sqx-form-hint> {{ "workflows.schemasHint" | sqxTranslate }} </sqx-form-hint>
                        </div>
                    </div>

                    @for (step of workflowView.steps; track step.name) {
                        <sqx-workflow-step
                            [disabled]="!workflowView.dto.canUpdate"
                            [roles]="roles"
                            [step]="step"
                            (update)="update($event)"
                            [workflow]="workflowView" />
                    }

                    @if (workflowView.dto.canUpdate) {
                        <button class="btn btn-success" (click)="addStep()">{{ "workflows.addStep" | sqxTranslate }}</button>
                    }
                } @else {
                    <sqx-workflow-diagram [workflow]="workflowView" />
                }
            </div>
        </div>
    }
</div>
